@charset "UTF-8";
.commodity-wuping {
  margin-top: 20px;
  display: flex;
  width: 1200px;
  height: 550px;
  position: relative;
}

.commodity-wuping .left-sp {
  position: relative;
  width: 1200px;
  height: 550px;
}

.commodity-wuping .left-sp .scale .spic {
  width: 449px;
  height: 449px;
  border: 1px solid #858585;
  position: relative;
  float: left;
}

.commodity-wuping .left-sp .scale .spic img {
  width: 449px;
  height: 449px;
}

.commodity-wuping .left-sp .scale .spic .sf {
  width: 100px;
  height: 100px;
  background-color: orange;
  opacity: 0.3;
  position: absolute;
  left: 0px;
  top: 0px;
  visibility: hidden;
  /* 这个隐藏元素，一直占据位置，方便获取尺寸 */
  cursor: move;
  /* move移动的图标 */
}

.commodity-wuping .left-sp .scale .bf {
  width: 460px;
  height: 460px;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
  float: left;
  margin-left: -1px;
  visibility: hidden;
  z-index: 1;
  /* 这个隐藏元素，一直占据位置，方便获取尺寸 */
}

.commodity-wuping .left-sp .scale .bf .bpic {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 800px;
  height: 700px;
}

.commodity-wuping .left-sp .small {
  width: 450px;
  height: 62px;
  margin: 20px 0 16px 0;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 450px;
  left: 0;
}

.commodity-wuping .left-sp .small .zuo {
  width: 15px;
  height: 54px;
  position: relative;
}

.commodity-wuping .left-sp .small .zuo em {
  width: 11px;
  height: 21px;
  background: url("../../img/jingling.png") no-repeat;
  background-position: 0 -834px;
  position: absolute;
  top: 17px;
  left: 0;
}

.commodity-wuping .left-sp .small .you {
  width: 15px;
  height: 54px;
  position: relative;
}

.commodity-wuping .left-sp .small .you i {
  width: 11px;
  height: 21px;
  background: url("../../img/jingling.png") no-repeat;
  background-position: 0 -865px;
  position: absolute;
  top: 17px;
  left: 0;
}

.commodity-wuping .left-sp .small div {
  height: 60px;
  width: 400px;
  overflow: hidden;
}

.commodity-wuping .left-sp .small div ul {
  display: flex;
  justify-content: space-between;
}

.commodity-wuping .left-sp .small div ul li {
  width: 58px;
  height: 58px;
  margin-left: 8px;
}

.commodity-wuping .left-sp .small div ul li img {
  width: 58px;
  height: 58px;
}

.commodity-wuping .left-sp .small div ul li:hover {
  border: 1px solid red;
}

.commodity-wuping .right-js {
  width: 720px;
  height: 532px;
  position: absolute;
  top: 0;
  left: 480px;
}

.commodity-wuping .right-js > h1 {
  height: 80px;
  line-height: 38px;
  font-size: 24px;
  background-color: #e5e5e5;
  overflow: hidden;
}

.commodity-wuping .right-js > div {
  height: 70px;
  line-height: 70px;
  display: flex;
}

.commodity-wuping .right-js > div > label {
  display: inline-block;
  width: 60px;
  font-size: 12px;
  margin-right: 26px;
}

.commodity-wuping .right-js > div > p {
  font-size: 20px;
  position: relative;
}

.commodity-wuping .right-js > div > p > span {
  color: red;
  font-size: 26px;
  font-weight: 900;
}

.commodity-wuping .right-js > div > p i {
  color: red;
  font-size: 26px;
}

.commodity-wuping .right-js > div > p .xiaozi {
  font-size: 12px;
}

.commodity-wuping .right-js > div > p del {
  font-size: 14px;
  margin: 0 20px;
}

.commodity-wuping .right-js > div > p a {
  font-size: 14px;
}

.commodity-wuping .right-js > div > .fenqi {
  font-size: 12px;
  color: #858585;
}

.commodity-wuping .right-js > div > .kuang {
  border: 1px solid #454545;
}

.commodity-wuping .right-js .p-btn #count {
  width: 100px;
  height: 42px;
  margin: 15px 0 0 0;
}

.commodity-wuping .right-js .p-btn a {
  background: red;
  color: wheat;
  width: 120px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin-top: 10px;
}

.commodity-wuping .right-js .tishi {
  font-size: 12px;
  color: #858585;
}

.commodity-wuping .right-js .gocar {
  font-size: 24px;
  line-height: 52px;
  margin: 5px 20px;
  color: white;
  background-color: #de1a1a;
  padding: 0 20px;
  float: left;
}

.commodity-wuping .right-js i {
  float: left;
}
